<template>
    <div class="containe" style="background-color: #f0f0f0;">
        <qiao-nav></qiao-nav>
        <levelMenu types="/qiao/d" @jsonListChange="jsonListChange"></levelMenu>

        <!-- 列表部分 -->
        <div class="cp-container" style="width: 1210px;" v-loading="loading">
            <el-row :gutter="10">
                <el-col :span="8" v-for="(item,i) in dataList"  :key="i">
                    <demandlist :item="item" class="demandlist"></demandlist>
                </el-col>
            </el-row>
        </div>
        <div v-if="showNo" class="f-no-data">
            <i class="i-no-data icon icon-no-data"></i>
            <p>暂无数据</p>
        </div>
        <!-- 分页器部分 -->
        <!-- <div class="foot-pagination"> -->
        <div class="block" style="margin:0px auto; text-align: center;padding:30px 0 80px 0;">
            <el-pagination
                v-if="!showNo"
                background
                class="public-page"
                layout="prev, pager, next"
                :current-page="jsonList.pageNumber"
                @current-change="handleCurrentChange"
                :page-size="9"
                @size-change="sizeCurrentChange"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'nuxt-property-decorator'
import qiaoNav from '~/components/common/qiaoNav.vue'
import levelMenu from '~/components/common/levelMenu.vue'
// import hall from '~/components/hall/hall.vue'
import {getxqList} from '~/api/servicehall/index'
import bidding from '~/components/demand/bidding.vue'
import demandlist from '~/components/common/demandlist.vue'
import {open53Server} from '~/method'
@Component({
    layout: 'qiao',
    components: {
        qiaoNav,
        levelMenu,
        bidding,
        demandlist
    },
    head () {
        return {
            title: 'CIIP供需中心-建筑业供需对接平台',
            meta: [
                {hid: 'description', name: 'description', content: 'CIIP供需中心需求大厅可以找到建筑行业能力服务、设备租赁和劳动力的相关需求项目，发现更多工作机会。'},
                {hid: 'keyword', name: 'keyword', content: 'CIIP，建筑设计，设备租赁，劳动力'}
            ]
        }
    }
})
export default class Ddetail extends Vue {
    isShowBidding:boolean = false
    total: number = 0
    info: any = {}
    jsonList:any = {
        classId: '',
        sort: 'DESC',
        sortField: 'createDate',
        province: '',
        city: '',
        biddingDeadline: '',
        pageNumber: 1,
        pageSize: 9,
        name: ''
    }
    loading:boolean = false
    showNo:boolean = false
    dataList: any = []
    @Watch('$route', {immediate: true})
    routerchange (to: any) {
        this.jsonList.name = to.query.wordText
        this.jsonListChange(this.jsonList)
    }
    mounted () {
        this.getxqList()
    }
    tofloat (val:any) {
        const num = parseFloat(val)
        let number = ''
        if (num < 10000) {
            number = (num / 1).toFixed(2) + '元'
        } else if (val === '') {
            number = '商议'
        } else {
            number = (num / 10000).toFixed(2) + '万元'
        }
        return number
    }
    goDetail (val:any) {
        // 做未登录验证
        if (!this.$store.state.haslogin) {
            this.isShowBidding = false
            // this.dialogShow = true
            this.$message.warning('请先登录')
        } else {
            this.info = val
            this.isShowBidding = true
        }
    }
    dialogCallback (flag: boolean) {
        this.isShowBidding = flag
    }
    showoffer () {
        // console.log(123)
    }
    jsonListChange (val:any) {
        this.jsonList = {
            classId: val.classId || '',
            sort: val.sort || '',
            sortField: val.sortField || '',
            province: val.province || '',
            city: val.city || '',
            biddingDeadline: '',
            pageNumber: 1,
            pageSize: 9,
            name: val.name || ''
        }
        if (this.jsonList.sortField === 'biddingDeadline') {
            // console.log('guolv')
        }
        this.getxqList()
    }
    async getxqList () {
        this.loading = true
        const {data}: any = await getxqList(this.jsonList)
        if (data.code >= 0) {
            for (let i = 0; i < data.data.content.length; i++) {
                data.data.content[i].createDate = data.data.content[i].createDate.substring(0, 10)
                data.data.content[i].biddingDeadline = data.data.content[i].biddingDeadline.substring(0, 10)
                if (data.data.content[i].demandLocationCity !== '') {
                    data.data.content[i].demandLocationCity = JSON.parse(data.data.content[i].demandLocationCity)
                }
                if (data.data.content[i].demandLocationProvince !== '') {
                    data.data.content[i].demandLocationProvince = JSON.parse(data.data.content[i].demandLocationProvince)
                }
            }
            if (data.data.totalElements) {
                this.total = data.data.totalElements
            }
            this.dataList = data.data.content
            this.loading = false
            // console.log(this.dataList.length)
            if (this.dataList.length === 0) {
                this.showNo = true
            } else {
                this.showNo = false
            }
        }
    }
    handleCurrentChange (val:any) {
        // console.log(val)
        this.jsonList.pageNumber = val
        this.getxqList()
    }
    sizeCurrentChange (val:any) {
        console.log(val)
    }
    open53Server () {
        open53Server()
    }
}
</script>
<style lang="scss" scoped>
.demandlist{
    margin-bottom: 10px;
}
.containe{
    .much-btn {
        height: 72px;
        line-height: 72px;
    }
    .cont-bos{
        display: flex;
    }
    .img-qy{
        position: relative;
        top: 7px;
    }
    .left{
        position: absolute;
        z-index: 1;
    }
    .flrt-smile{
        font-size: 14px;
        color: black;
        .span-btn-item{
                    font-size: 14px;
                    color: #666;
                    margin-left: 10px;
                    .icon{
                        margin-right: 4px;
                    }
                    .icon-weixin_hover{
                        display: none;
                    }
                    &:hover{
                        color: #11a9e8;
                        .icon-weixin_hover{
                            display: inline-block;
                        }
                        .icon-weixin{
                            display: none;
                        }
                    }
                }
    }
    .elrow{
        width: 100%;
        height: 52px;
        line-height: 52px;
        background-color: #e3e3e3;
        border-radius: 4px;
        span {
            cursor: pointer;
        }
    }
    .f-box{
        position: relative;
    }
    .f-boxr{
        // position: relative;
    }
    .flleft{
        z-index: 2;
        position: absolute;
        left: 10px;
        color: #11a9e8;
        font-weight: 700;
        font-size: 20px;
    }
    .fllerg{
        z-index: 2;
        position: absolute;
        right: 50px;
        color: #11a9e8;
        font-size: 14px;
        font-weight: 700;
    }
    .fllefts{
        z-index: 2;
        position: absolute;
        right: 200px;
        font-size: 16px;
        color: #333333;
    }
    .fllergs{
        z-index: 2;
        position: absolute;
        right: 30px;
        font-size: 14px;
        color: #666666;
    }
    .content-body{
        cursor: pointer;
        min-height: 100px;
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        margin: 20px auto;
    }
    .allification{
        color: #11a9e8;
    }
    .firstLine{
        display: flex;
        width: 100%;
        height: 56px;
        line-height: 56px;
    }
    .firstLine>span{
        width: 100px;
        text-align: center;
        font-size: 14px;
    }
    .line{
        width: 96%;
        height: 1px;
        background-color: #f3f5f7;
        margin-left: 2%;
    }
}
.containe::v-deep li.number{
        margin: 0 5px;
        background-color:#fff;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
    }
</style>
